<template>
  <div id="app">
    <audio id="audio" src="./../static/sound/warring.mp3" />
    <transition name="fade" mode="out-in">
      <router-view ref="transEvent"></router-view>
      
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: ""
    };
  },
  // created() {
  //   this.client.connect({
  //     useSSL: true,
  //     userName : "qpi2p04/root",
  //     password : "m29466dndqz5skpa",
  //     onSuccess: this.onConnect
  //   }); //连接服务器并注册连接成功处理事件
  //   this.client.onConnectionLost = this.onConnectionLost; //注册连接断开处理事件 
  //   this.client.onMessageArrived = this.onMessageArrived; //注册消息接收处理事件
  // },
  name: "app",
  components: {},
  methods: {
    aplayAudio() {
      const audio = document.getElementById("audio");
      audio.play();
    },

    onMessageArrived: function(message) {
    },
    onConnect: function() {

      this.client.subscribe(this.topic); //订阅主题
    },
    socketclose() {
      this.socket.close();
      this.socket = "";
    },
    socketlogin() {
      var _this = this;
      var token = JSON.parse(localStorage.getItem("key"));

      if (token) {
        // clearInterval(t);
        var clientid = "3dca953d98244a068c59faad99d5e98f";
        if (this.socket) {
          if (sessionStorage.getItem("facility_details")) {
            sessionStorage.setItem(
              "facility_off",
              sessionStorage.getItem("facility_details")
            );
            this.socket.emit("subscibe_device_on", {
              token: token,
              deviceId: sessionStorage.getItem("facility_details")
            });
          } else {
            this.socket.emit("subscibe_device_off", {
              token: token,
              deviceId: sessionStorage.getItem("facility_off")
            });
          }
          return false;
        }
        this.socket = io.connect(window.location.hostname+":"+window.location.port+"?token=" + token);
        // this.socket=socket;
        // socket = io.connect(this.urlapi+'?token=' + token);
        this.socket.on("connect_error", function(data) {
        });
        this.socket.on("connect_timeout", function(data) {
        });
        this.socket.on("error", function(data) {
        });

        this.socket.on("connect", function() {
          // output('<span class="connect-msg">Client has connected to the server!</span>');
        });

        this.socket.on("message", function(rsp) {
          // output('<span class="username-msg">' + rsp.data.content + '</span> ');
          let tum = JSON.parse(rsp);
          // console.log(tum.data.type);
          let dist = tum.data.content;
          let num = dist;
          let hdpi = _this.GetQueryString("hdpi");
          if (hdpi == 0 && tum.data.type != 1) {
            return false;
          }
          if (tum.data.type == 0) {
            // let dist = tum.data.content.replace(/&quot;/g, '"')

            if (dist.alarmSwitchState) {
              _this.aplayAudio();
            }
            if (num.state == 1) {
              _this.open15(num); //解除告警
              _this.$refs.transEvent.handleSave(num);
              return false;
            }
            if (num.level == 0) {
              //事件

              _this.open13(num);
            } else if (num.level == 1) {
              //一般告警

              _this.open16(num);
            } else if (num.level == 2) {
              //重要告警

              _this.open12(num);
            } else if (num.level == 3) {
              //严重告警

              _this.open14(num);
            }
            _this.$refs.transEvent.handleSave(num);
          } else if (tum.data.type == 1) {
     
            _this.$refs.transEvent.handleSave1(JSON.parse(rsp).data.content);
          } else if (tum.data.type == 2) {
            _this.open17(num);
            _this.$refs.transEvent.handleSave2(dist);
          } else if (tum.data.type == 3) {
            _this.open18(num);
          } else if (tum.data.type == 4) {
            _this.open19(num);
          }
        });

        this.socket.on("disconnect", function() {
          // output('<span class="disconnect-msg">The client has disconnected!</span>');
  
          this.socket = "";
          this.socket = "";
        });

        function sendDisconnect() {}
      } else {
        // alert(1)

        if (this.socket) {
          this.socket.disconnect();

          this.socket = "";
          this.socket = "";
        }
      }
    },
    open3() {
 
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },

    open4(s) {
      this.$notify.error({
        title: "设备名称:" + s.deviceName,
        message: s.triggerText,
        type: "warning",
        showClose: true
      });
    },

    open5() {
      this.$notify.info({
        title: "消息",
        message: "这是一条消息的提示消息"
      });
    },
    open12(s) {
      let stateText = "";
      if (s.state == 0) {
        stateText = "这是一条新的告警";
      } else if (s.state == 1) {
        stateText = "告警已处理,处理结果:" + s.remark;
      } else {
        stateText = "这是一条误报的告警";
      }
      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,

        message:
          "<a  target='_blank' href='#/devices/deviceDatail?id=" +
          s.deviceId +
          "' ><div class='give-type give-type1'> <i class='icon-give1'></i><div>告警状态：" +
          stateText +
          "</div><div>告警内容：" +
          s.triggerText +
          "</div><div>设备名称： " +
          s.deviceName +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>告警时间：" +
          s.updateTime +
          "</div></div></a>"
      });
    },
    open13(s) {
      let stateText = "";
      if (s.state == 0) {
        stateText = "这是一条新的告警";
      } else if (s.state == 1) {
        stateText = "告警已处理,处理结果:" + s.remark;
      } else {
        stateText = "这是一条误报的告警";
      }
      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message:
          "<a  target='_blank' href='#/devices/deviceDatail?id=" +
          s.deviceId +
          "' ><div class='give-type give-type2'> <i class='icon-give2'></i><div>告警状态：" +
          stateText +
          "</div><div>告警内容：" +
          s.triggerText +
          "</div><div>设备名称：" +
          s.deviceName +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>告警时间：" +
          s.updateTime +
          "</div></div></a>"
      });
    },
    open14(s) {
      let stateText = "";
      if (s.state == 0) {
        stateText = "这是一条新的告警";
      } else if (s.state == 1) {
        stateText = "告警已处理,处理结果:" + s.remark;
      } else {
        stateText = "这是一条误报的告警";
      }
      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message:
          " <a  target='_blank' href='#/devices/deviceDatail?id=" +
          s.deviceId +
          "' ><div class='give-type give-type3'> <i class='icon-give1'></i><div>告警状态：" +
          stateText +
          "</div><div>告警内容：" +
          s.triggerText +
          "</div><div>设备名称：" +
          s.deviceName +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>告警时间：" +
          s.updateTime +
          "</div></div></a></a>"
      });
    },
    open15(s) {
      let stateText = "";
      if (s.state == 0) {
        stateText = "这是一条新的告警";
      } else if (s.state == 1) {
        stateText = "告警已处理,处理结果:" + s.remark;
      } else {
        stateText = "这是一条误报的告警";
      }
      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,

        message:
          "<a  target='_blank' href='#/devices/deviceDatail?id=" +
          s.deviceId +
          "' ><div class='give-type give-type5'> <i class='icon-give1'></i><div>告警状态：" +
          stateText +
          "</div><div>告警内容：" +
          s.triggerText +
          "</div><div>设备名称：" +
          s.deviceName +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>告警时间：" +
          s.updateTime +
          "</div></div></a>"
      });
    },
    open16(s) {
      let stateText = "";
      if (s.state == 0) {
        stateText = "这是一条新的告警";
      } else if (s.state == 1) {
        stateText = "告警已处理,处理结果:" + s.remark;
      } else {
        stateText = "这是一条误报的告警";
      }
      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message:
          "<a  target='_blank' href='#/devices/deviceDatail?id=" +
          s.deviceId +
          "' ><div class='give-type give-type4'> <i class='icon-give1'></i><div>告警状态：" +
          stateText +
          "</div><div>告警内容：" +
          s.triggerText +
          "</div><div>设备名称：" +
          s.deviceName +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>告警时间：" +
          s.updateTime +
          "</div></div></a>"
      });
    },
    open17(s) {
      let stateText = "设备上下线通知";
      if (s.state == 1) {
        stateText = "设备上线通知";
      } else {
        stateText = "设备下线通知";
      }
      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message:
          "<a   ><div class='give-type give-type5'> <i class='icon-give1'></i><div>通知状态：" +
          stateText +
          "</div><div>设备名称：" +
          s.name +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>通知时间：" +
          s.createTime +
          "</div></div></a>"
      });
    },
    open18(s) {
      let stateText = "设备移动通知";

      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message:
          "<a ><div class='give-type give-type5'> <i class='icon-give1'></i><div>通知状态：" +
          stateText +
          "</div><div>设备名称：" +
          s.name +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>通知时间：" +
          s.createTime +
          "</div></div></a>"
      });
    },
    open19(s) {
      let stateText = "流量阈值变化通知";

      this.$notify({
        // title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message:
          "<a  target='_blank' href='#/device/flow/manager?name=" +
          s.name +
          "' ><div class='give-type give-type5'> <i class='icon-give1'></i><div>通知状态：" +
          stateText +
          "</div><div>设备名称：" +
          s.name +
          "</div><div>设备编号：" +
          s.deviceSn +
          "</div><div>通知时间：" +
          s.updateTime +
          "</div></div></a>"
      });
    },
    open6() {
      this.$notify.error({
        title: "错误",
        message: "这是一条错误的提示消息"
      });
    }
  },
  destroyed: function() {
    this.socket.close();
  },
  mounted() {
    //console.log(123);

    var _this = this;
    var socket;
    let token1 = this.getCookie("key");
 
    if (!token1) {
      localStorage.removeItem("key");
      localStorage.removeItem("menu");
      // this.$router.push({ path: "/login" });
    }

    var token = JSON.parse(localStorage.getItem("key"));
    if (token) {
      this.socketlogin();
    }
    let t = setInterval(() => {
    
      if (this.socket) {
        if (sessionStorage.getItem("facility_details")) {
        
          sessionStorage.setItem(
            "facility_off",
            sessionStorage.getItem("facility_details")
          );
          this.socket.emit("subscibe_device_on", {
            token: token,
            deviceId: sessionStorage.getItem("facility_details")
          });
        } else {
          // console.log(
          //   "subscibe_device_off:" + sessionStorage.getItem("facility_off")
          // );
          this.socket.emit("subscibe_device_off", {
            token: token,
            deviceId: sessionStorage.getItem("facility_off")
          });
        }
        return false;
      }
    }, 5000);

    // setInterval(() => {
    //   let user = JSON.parse(sessionStorage.getItem("user"));
    //   if (user) {
    //     // _this.open2();
    //   } else {
    //     // _this.open4();
    //   }
    // }, 3000);
  }
};
</script>

<style lang="scss">

body {
  margin: 0px;
  padding: 0px;
  /*background: url(assets/bg1.jpg) center !important;
		background-size: cover;*/
  // background: #1F2D3D;
  // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  //   Microsoft YaHei, SimSun, sans-serif;
  font-family: 'Noto Sans';
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

.el-submenu [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}

.el-menu-item [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}

.toolbar {
  background: #f2f2f2;
  padding: 10px;
  //border:1px solid #dfe6ec;
  margin: 10px 0px;

  .el-form-item {
    margin-bottom: 10px;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.el-image-viewer__wrapper .el-image-viewer__canvas >img{
  max-width: 70% !important;
}
.track-map-sel input{
  background: #08304a;
}
.track-map-sel{
  // background: #fff;
  background: #08304a;
}
.track-map-sel .el-range-separator{
  color: #fff !important;
}
.track-map-sel input{
  color: #fff !important;
}
.track-map-sel .el-select__tags-text{
  color: #fff;
}
.track-map-sel .el-tag{
  background-color: #395e76;
}
.msg-pop .el-dialog{
  position: relative;
  background-size: 100%;
  // height: 28vh;
  background-position: top, bottom;
  background: url(./assets/01.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.msg-pop .el-dialog .el-dialog__header{
  background: transparent;
  text-align: center;
}
#allmap2 .BMapLib_Drawing{
    left: 50% !important;
    top: 10% !important;
}
.ipt-filter .el-input__inner{
  //  background:#08304a;
}
</style>